<template>
  <div class="web-container">
    <div class="book-shelf">
      <div class="shelf-title">
        <span class="title">我的书架</span>
        <div class="title-right">
          <ul>
            <li>
              <el-checkbox v-model="checked">选择</el-checkbox>
            </li>
            <li>
              <el-checkbox v-model="checkedAll" :indeterminate="isIndeterminate" @change="handleCheckAllChange">全部选择</el-checkbox>
            </li>
            <li @click="deleteId">
              <span class="delete-btn">删除</span>
            </li>
          </ul>
        </div>
      </div>
      <div class="content">
        <el-checkbox-group v-model="bookCheckedList" @change="addBookChecked">
          <div class="block" v-for="(item,index) in bookList" :key="index">
            <div class="book-item">
              <el-checkbox :label="item.id" v-show="checked" :value="item.id"></el-checkbox>
              <img class="book-cover" @click="goToInfo(item)" :src="item.cover" alt="" srcset="">
              <span class="book-name" v-html="item.title">生而不凡</span>
            </div>
          </div>
        </el-checkbox-group>
      </div>
      <div class="pagination">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="currentPage" :page-size="10" layout="total,prev, pager, next, jumper" :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { bookShelf,deleteBookShelf } from "@/api/index";
export default {
  data() {
    return {
      currentPage: 1,
      checked: false,
      checkedAll: false,
      bookCheckedList: [],
      bookList: [],
      isIndeterminate: true,
      allListId: [],
      total: ""
    };
  },
  components: {},
  created() {
    this.init();
  },
  methods: {
    goToInfo(item) {
      this.$router.push(
        "/book/info?bookId=" + item.fileId + "&bookName=" + item.title
      );
    },
    init() {
      if (sessionStorage.getItem("userId")) {
        bookShelf().then(res => {
          this.total = Number(res.data.date.total);
          const listdata = res.data.date.list;
          listdata.map(book => (book.active = false));
          this.bookList = listdata;
          console.log(listdata);
        });
      } else {
        this.$store.commit("SET_LOGINSHOW", true);
      }
    },
    //全选
    handleCheckAllChange(val) {
      const checkAll = [];
      this.bookList.map(book => {
        checkAll.push(book.id);
      });
      this.checked = true;
      this.bookCheckedList = val ? checkAll : [];
      this.isIndeterminate = false;
      // console.log(this.bookCheckedList,123);
      this.allListId = this.bookCheckedList;
      // console.log(this.allListId,321);

    },
    deleteId() {
      if (this.allListId.length <= 0) {
        this.$message({
          message: "请选择删除项!",
          type: "warning"
        });
        return;
      }
      const arrlength = this.allListId.length;
      const delid = this.allListId.join(",");
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteBookShelf(delid).then(res => {
            this.$message({
              message: "刪除成功",
              type: "success"
            });
            this.init();
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
    },
    addBookChecked(value) {
      this.allListId = value;
      console.log(value)
      // this.allListId = value
      // let checkedCount = value.length;
      // this.checkAll = checkedCount === this.cities.length;
      // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
};
</script>
<style lang="less" scoped>
.custom-dz {
  .title-right .delete-btn {
    color: #e93926;
  }
}
.book-shelf {
  margin-top: 20px;
  border-radius: 10px;
  padding: 20px;
  background: #fff;
  .shelf-title {
    display: flex;
    height: 50px;
    line-height: 50px;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #c1c1c1;
    .title {
      font-size: 24px;
      color: #252525;
    }
    .title-right {
      overflow: hidden;
      ul {
        float: left;
        li {
          float: left;
          padding: 0 15px;
        }
      }
    }
  }
  .content {
    min-height: 500px;
    padding: 10px;
    .block {
      width: 20%;
      text-align: center;
      position: relative;
      cursor: pointer;
      .book-item {
        width: 144px;
        margin: 0 auto 10px auto;
        .book-cover {
          width: 144px;
          height: 193px;
          border-radius: 10px;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
        }
        .book-name {
          display: block;
          text-align: left;
          margin-top: 5px;
          font-size: 18px;
          color: #252525;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
        }
      }
    }
  }
}
</style>
<style lang="less">
.content {
  .el-checkbox-group {
    display: flex;
    flex-wrap: wrap;
    .el-checkbox {
      position: absolute;
      top: 0px;
      left: 10px;
      .el-checkbox__inner {
        width: 20px;
        height: 20px;
      }
      .el-checkbox__input.is-checked .el-checkbox__inner,
      .el-checkbox__inner:hover,
      .el-checkbox__inner:focus {
        background: #fff;
        border-color: #c1c1c1;
      }
      .el-checkbox__inner::after {
        height: 10px;
        left: 6px;
        top: 2px;
        width: 5px;
        border-color: #15c798;
      }
      .el-checkbox__label {
        display: none;
      }
    }
  }
}
.title-right {
  .el-checkbox__label {
    font-size: 16px;
    color: #000;
  }
  .delete-btn {
    font-size: 16px;
    cursor: pointer;
    color: #15c798;
  }
}
</style>



